import React from 'react';
import { Text, View, ScrollView, TouchableWithoutFeedback } from 'react-native';
import { WhiteSpace, WingBlank, Flex, Button, Drawer, List, Popover } from '@ant-design/react-native';
import styles from './styles';
import { Ionicons, Entypo } from '@expo/vector-icons';

export default function Nav({ navigation }) {
  const drawer = React.useRef(null);
  const [isOpen, setIsOpen] = React.useState(false);
  const [position, setPosition] = React.useState('left');

  const itemArr = Array.apply(null, Array(20))
    .map(function (_, i) {
      return i;
    })
    .map((_i, index) => {
      if (index === 0) {
        return (
          <List.Item
            key={index}
            multipleLine
          >
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                }}
              >
                <Entypo name="emoji-flirt" size={36} style={{ marginRight: 10, opacity: 1 }} />
                <Text>Categories - {index}</Text>
              </View>
              <Button
                type="primary"
                size="small"
                onPress={() => setIsOpen(false)}
              >
                close drawer
              </Button>
            </View>
          </List.Item>
        );
      }
      return (
        <List.Item
          key={index}
        >
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
            }}
          >
            <Entypo
              name={index < 5 ? "emoji-happy" : "emoji-neutral"}
              size={24}
              style={{ marginRight: 10, opacity: (1 - index * 0.1) < 0.05 ? 0.04 : 1 - index * 0.1 }}
              color={`rgb(${40*index}, ${24*index}, ${1*index})`}
            />
            <Text>Categories - {index}</Text>
          </View>
        </List.Item>
      );
    });

  const sidebar = (
    <ScrollView style={[styles.container]}>
      <List>{itemArr}</List>
    </ScrollView>
  );

  const onOpenChange = (status) => {
    console.log('是否打开了 Drawer', isOpen.toString());
    setIsOpen(status);
  }

  const [popoverState, setPopoverState] = React.useState([]);
  const [test, setTest] = React.useState('');

  let overlay = [1, 2, 3].map((i, index) => (
    <Popover.Item key={index} value={`option ${i}`}>
      <Text>option {i}</Text>
    </Popover.Item>
  ));

  overlay = overlay.concat([
    <Popover.Item key="4" value="disabled" disabled>
      <Text style={{ color: '#ddd' }}>disabled opt</Text>
    </Popover.Item>,
    <Popover.Item key="6" value="button ct" style={{ backgroundColor: '#efeff4' }}>
      <Text>关闭</Text>
    </Popover.Item>,
  ]);

  const renderList = (overlay, key, index) => {
    return (
      <List.Item
        key={key}
        extra={
          <Popover
            overlay={overlay}
            triggerStyle={styles.triggerStyle}
            onSelect={v => {
              const item = {
                key, v,
              };
              const arr = [...popoverState];
              // const itemIdx = arr.findIndex((i) => i.key === key);
              // if (itemIdx !== -1) {
              //   // found
              //   arr[itemIdx].v = v;
              // } else {
              //   arr.push(item);
              // }
              arr[index] = item;
              setPopoverState(arr);
              setTest(`${key}, ${v}`);
              // console.log('popover on select: key - ', key, 'v - ', v);
              // console.log(item);
              // console.log('popover on select: ', ...popoverState);
            }}
          >
            <Ionicons name="menu" size={16} />
          </Popover>
        }
      >
        <View>
          <Text>列表项 {key} {popoverState[index] && `-> 选择了：${popoverState[index].v}`}</Text>
        </View>
      </List.Item>
    );
  }

  return (
    <Drawer
      sidebar={sidebar}
      position={position}
      open={isOpen}
      // drawerRef={el => (drawer = el)}
      ref={drawer}
      onOpenChange={onOpenChange}
      drawerBackgroundColor="#ccc"
    >
      <View style={{ marginTop: 10, padding: 8 }}>
        <Button onPress={() => {
          setPosition('left');
          setIsOpen(v => !v);
        }}>
          Open drawer from left
        </Button>
        <WhiteSpace />
        <Button onPress={() => {
          setPosition('right');
          setIsOpen(v => !v);
        }}>
          Open drawer from right
        </Button>
        {/*
        position?: 'left' | 'right' | 'top' | 'bottom';
        组件代码里有 top 和 bottom，但是设置后没有效果，似乎是不支持这2种
        线上官方文档也只有left和right
        https://rn.mobile.ant.design/components/drawer/#undefined
        */}
        {/* <Button onPress={() => {
          setPosition('top');
          setIsOpen(v => !v);
        }}>
          Open drawer top
        </Button>
        <Button onPress={() => {
          setPosition('bottom');
          setIsOpen(v => !v);
        }}>
          Open drawer bottom
        </Button> */}
        <WhiteSpace />

      </View>
      <View style={{ padding: 10 }}>
        <Text>Popover</Text>
        <List>
          {[1, 2, 3, 4, 'A', 'B', 'C', 'D'].map((item, index) => renderList(overlay, item, index))}
        </List>
        <Popover
          overlay={<>
            <Popover.Item value={'test'}>
              <Text>自定义组件 x</Text>
            </Popover.Item>
            <Popover.Item value={'test'}>
              <Text>自定义组件 x</Text>
            </Popover.Item>
          </>}
          renderOverlayComponent={nodes => (
            <View style={{}}>
              <Text
                style={{
                  paddingHorizontal: 9,
                  paddingVertical: 9,
                  color: '#2b2b2b',
                  fontWeight: 'bold',
                  backgroundColor: '#ddd',
                }}
              >
                我是自定义组件title
              </Text>
              {nodes}
            </View>
          )}
        >
          <Text
            style={{
              margin: 16,
            }}
          >
            自定义组件
          </Text>
        </Popover>
        <Popover
          overlay={
            <Popover.Item value={'test'}>
              <Text>自定义组件 x</Text>
            </Popover.Item>
          }
          styles={{
            arrow: {
              borderTopColor: 'transparent',
            },
          }}
        >
          <Text
            style={{
              padding: 16,
              backgroundColor: '#ddd',
            }}
          >
            隐藏箭头
          </Text>
        </Popover>
      </View>
      <View style={{ padding: 10 }}>
        <Button onPress={() => setPopoverState([])}>clear</Button>
        {/* <Button onPress={() => {
        console.log('------------------------------------');
        console.log(popoverState);
        console.log('---------------->>>-----------------');
        console.log(popoverState['A']);
      }}>check</Button> */}
      </View>
    </Drawer>
  );
};
